<template>
  <div>
     <h1>登陆页面</h1>

     <ImageView
      src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg"
      width="200px"
      height="200px"
      @handleImageClick="handleImageClick"
     ></ImageView>

     <el-input v-model="username" placeholder="请输入内容"></el-input>
     <el-input v-model="password" placeholder="请输入内容"></el-input>

     <el-button @click="handleBtnClick">提交</el-button>

  </div>

</template>
<script>
/**
 *  异步编程解决方案：
 * 1. 回调函数
 * 2. promise
 * 3. generator
 * 4. async  异步解决的终极方案
 *
 * - 封装组件的普遍逻辑：
 * 1. 数据往下流 props:
 * 2. 逻辑往上走 （自定事件触发/事件回调触发）
 *
 * - 方便组件管理
 * 1. 子组件一般负责渲染ui
 * 2. 父组件一般负责逻辑处理
 *
 */
import { mapMutations, mapActions } from 'vuex'
import ImageView from '@/components/base/ImageView'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  components: { ImageView },
  methods: {
    ...mapActions(['GetLogin', 'GetUserInfo']),
    handleImageClick() {
      console.log('图片操纵')
    },
    handleBtnClick() {
      // 1. 走完他，之后。就跳转页面
      // 但是发现当前的这个代码属性异步代码
      this.GetLogin({
        username: this.username,
        password: this.password
      }).then(res => {
        console.log('res: ....:', res)
        this.$router.push('/')
      })
    }
  },
}
</script>